<template>
  <div v-if="!item.isCatalog">
    <el-menu-item :index="item.menuId">
      <i v-if="item.icon" :class="[item.icon]" />
      <i v-else class="el-icon-s-help" />
      <span slot="title">{{ item.menuName }}</span>
    </el-menu-item>
  </div>
  <div v-else>
    <el-submenu :index="item.menuId">
      <template slot="title">
        <i v-if="item.icon" :class="[item.icon]" />
        <i v-else class="el-icon-menu" />
        <span slot="title">{{ item.menuName }}</span>
      </template>
      <SliderItem v-for="childItem in item.children" :key="childItem.menuId" :item="childItem" />
    </el-submenu>
  </div>
</template>
<script>
export default {
  name: 'SliderItem',
  props: {
    item: {
      default: () => null,
      type: Object
    }
  }
}
</script>
<style lang="scss" scoped>
.el-submenu {
  overflow-x: hidden;
  overflow-y: hidden;
}
.el-menu-item i,
.el-submenu__title i {
  color: #fff;
}
.el-menu-item span,
.el-submenu__title span {
  color: #fff;
}
// /deep/.el-submenu .el-submenu .el-submenu__title {
//   background-color: #0d356c !important;
// color: #fff !important;
// }

/deep/.el-submenu .el-menu-item {
  background-color: #0d356c !important;
  height: 56px;
}
/deep/ i[class^='el-icon'] {
  transform: translateY(-1px);
}
/deep/ .el-icon-arrow-down {
  transform: translateY(2px);
}
</style>
